/**
 * JLego UI Components
 * 
 */
OREG.REQUIRED = '<span class="aui-icon icon-required"><span>(required)</span></span>';

/**
 * Generate grid to table based on model
 * 
 * model : {
 *     targetId: 'sqlResult',
 *     columns: ['id','firstName','lastName'],
 *     list: [
 *       { id: 1, firstName: 'John', lastName: 'Flemming' }
 *     ]
 * }
 * 
 * Columns can also use JSON object
 * columns: [ {name:'id', label: 'ID'}, {name:'firstName', label: 'First Name', {name:'lastName', label: 'Last Name'}]
 * 
 * Using action column for edit
 * 
 * columns: [ {name:'id', label: 'ID'}, {name:'firstName', label: 'First Name', {name:'lastName', label: 'Last Name'}, 
 *            { type:'hyperlink', label: 'Action',  url: 'admin/edit_tenant.html?id={0}', urlText: 'Edit', urlFieldsArgs: ['id'] } 
 *          ]
 */
OREG.dataGrid = function(model){
	var columns = model.columns;
	var gridModel = model; 
    var temp = '';
    // Header
    temp += '<thead><tr>';
    AJS.$.each(columns, function(idx,item){
    	
    	if(item.field==undefined && item.title==undefined ){
        	temp += '<th id="'+item+'">';
        	temp += item;
        	temp += '</th>';
    	}else{
    		temp += '<th id="'+item+'">';
        	temp += item.title;
        	temp += '</th>';
    	}
    });
    temp += '</tr></thead>';

    // Body	
    temp += '<tbody>';
    AJS.$.each(model.dataSource.data, function(idx,item){
    	temp += '<tr>';
        AJS.$.each(columns, function(idx2,item2){
        	if(item2.field==undefined && item2.title==undefined ){
        		 temp += '<td headers="'+item+'">' + item[item2] + '</td>'; 
        	}else{
            	 temp += JL.createColumn(item,item2);
        	}
        });
        temp += '</tr>';
    });
    temp += '</tbody>';
    
	AJS.$('#' + model.targetId).html(temp);		
	
}

OREG.form = function(model){
  var temp = '<form action="#" class="aui">';	
  temp += '<fieldset class="form-fields">';
  if(model.fields!=undefined){
	  AJS.$.each(model.fields,function(index,item){
		  
		  // Prepare field definition
		  temp += '<div class="field-group">';
		  
		  temp += '<label for="'+item.field+'">'+item.label;
		  if(item.required!=undefined && item.required==true) temp += JL.REQUIRED;
		  temp += '</label>';
		  
		  temp += OREG.createComponent(item);
		  
		  temp += '</div>';
	  });
  }	
  temp += '</fieldset>';
  temp += '</form>';
  return temp;
}

/* Internal method class */
OREG.createComponent = function(item){
  var temp = '';
  
  var style = '';
  if(item.styles!=undefined) style = ' style="' + JL.cssStyles(item.styles) + '" ';
  
  switch(item.type){
     case 'text': default:
    	  if(item.textMode==undefined || item.textMode==null || item.textMode==''||item.textMode=='text') {
              temp += '<input class="text" type="text" id="'+item.field+'" name="'+item.field+'" '+style+' />';
    	  } else if(item.textMode=='password') {
    		  temp += '<input class="text" type="password" id="'+item.field+'" name="'+item.field+'" '+style+' />';
    	  } else if(item.textMode=='multiline') {
    		  temp += '<textarea class="text" id="'+item.field+'" name="'+item.field+'" '+style+'></textarea>';
    	  }
    	  break;
  }	
  return temp;
}
OREG.createColumn = function(item, columnItem){
    var temp = '';
    // Check type
    
	switch(columnItem.type){
	    case 'grouplink':
	    	   temp += '<td headers="'+item+'">';
	    	   AJS.$.each(columnItem.template,function(idx,itm){
	    		   if(itm.text=='' || itm.text == undefined){
			    	   temp += OREG.makeLink(itm, item); //itm.url, item[itm.field], itm.args, item);
		    	   }else{
		    		   temp += OREG.makeLink(itm, item); //.url, itm.text, itm.args, item, columnItem);
		    	   }
	    		   temp += '&nbsp;&nbsp;';
	    	   });
	    	   temp += '</td>';
	    	   break;
	     default:
	    	   temp += '<td headers="'+item+'">' + item[columnItem.field] + '</td>';
	    	   break;
    }
    return temp;	
}
OREG.cssStyles = function(cssStyles){
	var temp = '';
	AJS.$.each(cssStyles,function(index,item){
		temp += index +': ' + item + ';';
	});
	return temp;
}
OREG.makeLink = function (templateItem, rowItem){
	var href = (templateItem.url==undefined) ? '#' : templateItem.url;
	var text = templateItem.text;
	var args = templateItem.args;
	
	if(args==undefined || args == null) return '<a href="'+href+'">'+text+'</a>';
	else {
		var temp = '';
		AJS.$.each(args, function(idx,itm){
			href = href.replace('{'+itm.key+'}',rowItem[itm.key]);
			temp += (itm.key + '=' + rowItem[itm.key] + '&') ;
		});
		if(temp!='') temp=temp.substring(0,temp.length-1);
		
		if(templateItem.needConfirm==undefined || templateItem.needConfirm==false)
			   return '<a id="edit_'+rowItem.id+'" href="'+href+'" onclick="'+templateItem.onClick+'('+ "'"+temp+"'"  + ')">'+text+'</a>';
		else
			   return '<a id="delete_'+rowItem.id+'" href="'+href+'" onclick="if(confirm('+ "'Are you sure'" +')) '+templateItem.onClick+'('+ "'"+temp+"'"  + ')">'+text+'</a>';
		
	}
}